<template>
  <div class="cartContainer">
    <!-- 头部 -->
    <div class="header">
      <div class="left">购物车</div>
      <div class="tag">领券</div>
      <!-- <div class="right" @click="deleteIsCheckCartList">编辑</div> -->
      <div class="right">编辑</div>
    </div>

    <template v-if="this.cartList.length > 0">
      <!-- NoticeBar 通知栏 -->
      <van-notice-bar text="自营仓商品，已满99元免邮" />
      <!-- changeShop 全场换购 -->
      <div class="changeShop">
        <div class="shopUp">
          <div class="tag">全场换购</div>
          <div class="shopText">已满足49元享超值换购</div>
          <div class="shopAgain">
            再逛逛
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="shopDown">
          <div class="goToChange">
            <div class="goToChangeText">去换购商品</div>
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
      <!-- cartItem -->
      <!-- v-for="(cartItem,index) in cartList" :key="cartItem.itemId" -->
      <van-swipe-cell v-for="(cartItem, index) in cartList" :key="cartItem.id">
        <div class="cartItem">
          <van-card
            :price="cartItem.skuPrice"
            :title="cartItem.skuName"
            :origin-price="cartItem.skuPrice"
            :thumb="cartItem.imgUrl"
            style="padding: 20px 50px"
          >
            <template #tags>
              <br />
              <van-tag plain type="warning">{{
                cartItem.sourceType + '; ' + cartItem.skuNum
              }}</van-tag>
            </template>
            <template #footer>
              <van-stepper
                min="1"
                max="200"
                input-width="30px"
                button-size="20px"
                v-model="cartItem.skuNum"
                @plus="changeNum(1, cartItem)"
                @minus="changeNum(-1, cartItem)"
              />
            </template>
          </van-card>

          <!-- 单选框 -->
          <van-checkbox
            class="checkBox"
            :name="cartItem.id"
            checked-color="red"
            v-model="cartItem.isChecked"
            @click="updateIsChecked(cartItem)"
          ></van-checkbox>
        </div>
        <template #right>
          <van-button
            @click="deleteOneCartList(cartItem)"
            square
            text="删除"
            type="danger"
            class="delete-button"
          />
        </template>
      </van-swipe-cell>
      <!-- 占位 -->
      <div class="box"></div>
      <!-- <router-link :to="'/detail'">哈哈</router-link> -->
      <!-- footer底部 -->
      <van-submit-bar class="footer">
        <template #button>
          <button class="dangerA">合计：￥{{ allMoney }}</button>
          <button class="danger">下单</button>
        </template>
        <van-checkbox v-model="isCheckAll" checked-color="red"
          >已选({{ checkedNum }})</van-checkbox
        >
      </van-submit-bar>
    </template>
    <div class="else" v-else>您的购物车空空如也~</div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
export default {
  name: 'Cart',
  data() {
    return {
      all: false,
    };
  },
  // 这样做目的是把数据存到data，后续在用的时候就方便了 简化写法
  mounted() {
    this.getShopCartList();
  },
  watch: {
    $route: {
      immediate: true,
      handler() {
        this.skuNum = this.$route.query.skuNum;
      },
    },
  },

  methods: {
    // 发送vuex获取购物车请求
    getShopCartList() {
      this.$store.dispatch('getShopCartList');
    },

    // 改变购物车数量
    async changeNum(disNum, cartItem) {
      // 变化的量加上现有的量小于1，就不对了
      if (disNum + cartItem.skuNum < 1) {
        // 让最终的量为1
        disNum = 1 - cartItem.skuNum;
      }
      try {
        await this.$store.dispatch('addOrUpdateShopCart', {
          skuId: cartItem.skuId,
          skuNum: disNum,
        });
        this.getShopCartList();
      } catch (e) {
        alert('添加购物车数量失败');
      }
    },

    // 单选按钮
    isCheck(cartItem) {
      cartItem.isChecked = !cartItem.isChecked;
    },
    // 点击修改单个单选框状态
    async updateIsChecked(cartItem) {
      try {
        await this.$store.dispatch('updateIsChecked', {
          skuId: cartItem.skuId,
          isChecked: cartItem.isChecked ? 1 : 0,
        });
        this.getShopCartList();
      } catch (e) {
        alert('改选选中失败');
      }
    },
    // 删除购物车单个商品
    async deleteOneCartList(cartItem) {
      try {
        await this.$store.dispatch('deleteOneCartList', cartItem.skuId);
        this.getShopCartList();
      } catch (e) {
        alert('删除选中失败');
      }
    },

    // // 批量删除购物车
    // async deleteIsCheckCartList() {
    //   let skuIdList = [];
    //   // console.log(this.cartList)
    //  (this.cartList || {}).forEach(item => {
    //    console.log(item.cartList)
    //     // item.cartList.forEach((item) => {
    //     //   if (item.cartList.isChecked === 1) {
    //     //     skuIdList.push(item.skuId);
    //     //   }
    //     // });
    //   });
    //   await this.$store.dispatch("deleteIsCheckCartList", {data: skuIdList});
    //   this.getShopCartList();
    // },
  },
  computed: {
    ...mapState({
      cartList: state => state.cart.cartList,
    }),

    // 单选如果全选中，下面按钮变
    isCheckAll: {
      get() {
        // return this.cartList.every(item => item.checked);
        return this.cartList.every(item => item.isChecked);
      },
      set(newValue) {
        // this.cartList.forEach(item => (item.checked = newValue));
        this.cartList.forEach(item => (item.isChecked = newValue));
      },
    },
    // +++++++++++++++++++++++++++
    //计算选择的数量
    checkedNum() {
      return this.cartList.reduce((prev, item) => {
        if (item.isChecked) {
          prev += item.skuNum;
        }
        return prev;
      }, 0);
    },

    // 计算总价 如果选中则计算
    allMoney() {
      // console.log(this.cartList)
      return this.cartList.reduce((prev, item) => {
        if (item.isChecked) {
          prev += item.cartPrice * item.skuNum;
          // console.log(prev);
        }
        return prev;
      }, 0);
    },
    // ++++++++++++
  },
};
</script>

<style lang="less" scoped>
.cartContainer {
  display: flex;
  // height: 1000px;
  flex-direction: column;
  justify-content: center;
  font-size: 18px;
  width: 100%;
  background-color: #eeeeee;
  .header {
    display: flex;
    align-items: center;
    height: 49px;
    padding: 0 10px 0 10px;
    border: 1px #ebebec solid;
    background-color: #ffffff;
    .left {
      width: 70%;
      font-size: 18px;
      color: #413234;
    }
    .tag {
      width: 10%;
      color: white;
      background-color: #fc7461;
      text-align: center;
      font-size: 12px;
    }
    .right {
      width: 20%;
      text-align: center;
      font-size: 16px;
      color: #413234;
    }
  }
  .changeShop {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 80px;
    padding: 0 10px;
    background-color: #ffffff;
    .shopUp {
      display: flex;
      align-items: center;
      width: 100%;
      height: 45px;
      // background-color: pink;
      .tag {
        display: inline-block;
        width: 56px;
        height: 17px;
        color: white;
        background-color: #fc7461;
        text-align: center;
        font-size: 12px;
        margin-left: 10px;
      }
      .shopText {
        font-size: 12px;
        margin-left: 10px;
      }
      .shopAgain {
        font-size: 12px;
        margin-left: 100px;
      }
    }
    .shopDown {
      display: flex;
      align-items: center;
      width: 100%;
      height: 35px;
      // background-color: rgb(134, 80, 89);
      .goToChange {
        width: 280px;
        height: 30px;
        font-size: 12px;
        margin-left: 50px;
        line-height: 30px;
        background-color: #fff7f6;
        .goToChangeText {
          margin-left: 10px;
          display: inline-block;
          width: 250px;
        }
      }
    }
  }
  // cartItem
  .delete-button {
    height: 135px;
  }
  .cartItem {
    width: 100%;
    position: relative;
    .checkBox {
      width: 20px;
      height: 20px;
      position: absolute;
      top: 35%;
      left: 8px;
      color: red;
      border-radius: 50%;
      // background-color: red;
    }
  }
  .box {
    width: 375px;
    height: 100px;
    background-color: #ffffff;
  }
  // footer
  .footer {
    position: fixed;
    left: 0;
    bottom: 51px;
    .van-checkbox {
      ::v-deep .van-checkbox__label {
        width: 60px;
      }
    }
    .dangerA {
      position: relative;
      top: 0;
      right: -16px;
      width: 170px;
      height: 50px;
      background-color: #fff;
      color: red;
      border: 0;
    }
    .danger {
      position: relative;
      top: 0;
      right: -16px;
      width: 100px;
      height: 50px;
      background-color: #dd1a21;
      color: #ffffff;
      border: 0;
    }
  }
  .else {
    width: 375px;
    height: 500px;
    background-color: #ffffff;
    text-align: center;
    line-height: 500px;
    color: rgb(194, 189, 189);
  }
}
</style>
